<template>
  <view class="component text-center">
      <view class="component-title">条形码和二维码混用</view>
      <view class="component-code">
          <tki-barcode
              ref="barcode"
              onval
              :val="code"
              :load-make="true"
              :opations="barOpations"/>
      </view>
      <view class="component-qr">
          <tki-qrcode
              ref="qrcode"
              onval
              :val="code"
              :size="250"
              :load-make="true"
              :show-loading="false"/>
      </view>
      <view class="coupon-no-view">
          <text>编号:</text>
          <text class="coupon-no">{{ code }}</text>
      </view>
  </view>
</template>

<script>
  import tkiBarcode from '@/components/tki-barcode/tki-barcode'
  import tkiQrcode from '@/components/tki-qrcode/tki-qrcode'

  export default {
      components: {
          tkiBarcode,
          tkiQrcode
      },
      data() {
          return {
              code: '',
              barOpations: {
                  height: 150,
                  displayValue: false
              }
          }
      },
      methods: {
          init () {
              this.code = '1234567890' // 生成一维码和二维码
              setTimeout(() => {
                  this.code = '0987654321' // 5 秒后刷新一维码和二维码
              }, 5000)
          }
      }
  }
</script>

<style lang="scss" scoped>
  .component {
      border-radius: 16rpx;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      background: #FFFFFF;
      flex: 1;
      margin: 64rpx;
      padding: 64rpx 32rpx;
      &-title {
          max-height: 112rpx;
          font-size: 40rpx;
          font-weight: 600;
          line-height: 56rpx;
          overflow: hidden;
      }
      &-code {
          height: 150rpx;
          margin: 32rpx 32rpx 0;
      }
      &-qr {
          height: 250rpx;
          margin-top: 36rpx;
      }
      .coupon-no-view {
          margin: 0 18rpx;
          height: 76rpx;
          border-radius: 8rpx;
          border: 2px solid #F5F5F5;
          display: flex;
          align-items: center;
          padding: 0 24rpx;
          margin-top: 36rpx;
          text {
              font-size: 24rpx;
              font-weight: 400;
              &:first-child {
                  color: #999999;
              }
          }
          .coupon-no {
              flex: 1;
              text-align: left;
          }
      }
  }
</style>
